<!--
<template>
  <div>
    <h2>自定义过渡测试</h2>
    <div>
      <collapse-transition>
        <p v-if="isIf">过渡组件</p>
      </collapse-transition>
      <button @click="toggle">切换</button>
    </div>
  </div>
</template>
 -->

<script lang="tsx">
import { Component, Vue } from 'vue-property-decorator'
import CollapseTransition from '@/components/CollapseTransition'
import { VNodeDirective } from 'vue'
import { Carousel, CarouselItem } from '@/components/Carousel'
import { shuffle } from '@/utils/index'

@Component({
  name: 'TransitionPage',
  components: {
    CollapseTransition,
    Carousel,
    CarouselItem,
  },
})
export default class extends Vue {
  render() {
    return (
      <div>
        <h2>自定义过渡测试</h2>
        <div>
          <div class='block-20'></div>

          <button onClick={this.fade}>fade</button>

          <transition name='fade'>
            <div class='transition-box' {...{ directives: this.fadeDirectives }} >简单的fade</div>
          </transition>

          <div class='block-20'></div>

          <button onClick={this.toggle}>切换</button>

          <collapse-transition>
            {
              this.isIf && <div class='transition-box' {...{ directives: this.collapseDirectives }} >折叠</div>
            }
          </collapse-transition>

          <div class='block-20'></div>
          <h3>自定义一个轮播图</h3>

          <div class='carousel-wrap'>
            <carousel>
              {
                Array.from({ length: 4 }, (k, v) => v).map(item => (
                  <carousel-item>
                    <div class='carousel-item'>{ item }</div>
                  </carousel-item>
                ))
              }
            </carousel>
          </div>

          <div class='block-20'></div>

          <div>
            <button onClick={ this.shuffle }>乱序</button>
            <button onClick={ this.add }>添加</button>
            <button onClick={ this.remove }>删除</button>
          </div>

          <transition-group name='flip-list' tag='ul'>
            {
              this.moveList.map(item => (
                <li key={'li-' + item} >{ item }</li>
              ))
            }
          </transition-group>

          <div class='block-20'></div>

          <transition-group name='list-complete' tag='p' class='sb'>
            {
              this.moveList.map(item => (
                <div class='list-complete-item' key={'item-' + item} >{ item }</div>
              ))
            }
          </transition-group>

          <div class='block-20'></div>
          <h3>网格</h3>
          <button onClick={ this.gridListShuffle }>乱序网格</button>
          <div class='block-20'></div>

          <transition-group name='cell' tag='div' class='cell-grid'>
            {
              this.gridList.map((item) => (
                <div class='cell' key={'grid-' + item.index} >{ item.value }</div>
              ))
            }
          </transition-group>

        </div>
      </div>
    )
  }

  private isIf = true

  private isShow = true

  get collapseDirectives(): VNodeDirective[] {
    return [
      { name: 'show', value: this.isShow },
    ]
  }

  toggle() {
    this.isShow = !this.isShow
    // this.isIf = !this.isIf
  }

  private isFade = true

  get fadeDirectives(): VNodeDirective[] {
    return [
      { name: 'show', value: this.isFade },
    ]
  }

  fade() {
    this.isFade = !this.isFade
  }

  private moveList: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]
  private nextNum = 9
  shuffle() {
    this.moveList = shuffle(this.moveList)
  }

  randomIndex() {
    return Math.floor(Math.random() * this.moveList.length)
  }

  add() {
    this.nextNum++
    this.moveList.splice(this.randomIndex(), 0, this.nextNum)
  }

  remove() {
    this.moveList.splice(this.randomIndex(), 1)
  }

  private gridList: {
    value: number
    index: number
  }[] = Array.from({ length: 81 }, (k, v) => v).map((item, index) => {
    return {
      value: (item % 9) + 1,
      index,
    }
  })

  gridListShuffle() {
    this.gridList = shuffle(this.gridList)
  }
}
</script>

<style>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.fade-enter-to, .fade-leave {
  opacity: 1;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 500ms;
}

.carousel-wrap {
  width: 500px;
}

.carousel-item {
  line-height: 200px;
  height: 200px;
  color: #475669;
  font-size: 14px;
  text-align: center;
}

.carousel-item:nth-child(2n) {
  background-color: #99a9bf;
}

.carousel-item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.flip-list-move {
  transition: transform 1s;
}

.flip-list-leave-active {
  position: absolute;
}

.list-complete-item {
  display: inline-block;
  margin-right: 15px;
  transition: all 1s;
}

.list-complete-enter, .list-complete-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.list-complete-leave-active {
  position: absolute;
}

.cell-grid {
  display: flex;
  width: 270px;
  flex-wrap: wrap;
}

.cell {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  box-sizing: border-box;
  border: 1px solid gray;
  margin-top: -1px;
  margin-left: -1px;
}

.cell-move {
  transition: all 1s;
}

</style>
